<template>
	<uni-popup ref="uPopup" :mask-click="false" type="center">
		<view class="agreement-view" :style="{ width: scrollWidth * 0.80 + 'px', height: scrollHeight * 0.70 + 'px' }">
			<!-- 弹框提示头 -->
			<view class="u-text-center">用户使用须知</view>
			<scroll-view scroll-y class="agreement-content" :style="{ height: (scrollHeight - 110) * 0.70 + 'px' }">
				您描述的内容
			</scroll-view>
			<view class="agreement-btns"
				:style="{ height: (scrollHeight*0.7 - (scrollHeight - 120) * 0.70) - 42 + 'px' }">
				<navigator class="no-btn text" target="miniProgram" open-type="exit">
					暂不使用
				</navigator>
				<view class="yse-btn text" @tap="admit">同意</view>
			</view>
		</view>
	</uni-popup>

</template>

<script>
	data() {
		return {
			// 内容的高度
			scrollWidth: uni.getSystemInfoSync().windowWidth,
			scrollHeight: uni.getSystemInfoSync().windowHeight,
		},
		mounted() {
				this.judge();
			},
			methods: {
				// 初始化的时候调用参数，判断用户是否第一次进入
				judge() {
					uni.getStorage({
						key: 'agreement_key',
						success: () => {
							// 获取到了不显示弹窗
							this.$refs.uPopup.close();
							uni.showTabBar({
								animation: true
							})
						},
						fail: () => {
							uni.hideTabBar({
								animation: true
							})
							this.$refs.uPopup.open('center');
						}
					})
				},
				// 同意按钮
				admit() {
					try {
						uni.setStorageSync('agreement_key', 'yes');
						uni.setStorageSync('agreement_Date', new Date().toLocaleString())
					} catch (e) {
						//TODO handle the exception
					}
					this.$refs.uPopup.close();
					uni.showTabBar({
						animation: true
					})
				},
			}

	}
</script>

<style>
	.line {
		/* line-height: 18px; */
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1em;
		vertical-align: middle;
		font-weight: normal
	}

	.agreement-view {
		margin-top: 20px;
		box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, .2);
		border-radius: 20rpx;
		padding: 20rpx 0rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		width: 300px;
		height: 400px;
		align-items: center;
		/* justify-content: center; */
		background-color: #fff;
	}

	.u-text-center {
		font-size: 15px;
		padding-bottom: 20rpx;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: 600;
		width: 100%;
		height: 30px;
		text-align: center;
	}

	.agreement-content {
		overflow-y: scroll;
		padding: 0rpx 20rpx 10rpx 20rpx;
	}

	.agreement-btns {
		width: 100%;
		/* height: 85rpx; */
		display: flex;
		flex-direction: row;
	}

	.yse-btn {
		color: #fff;
		background-color: red;
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 20rpx 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.no-btn {
		/* background-color: aquamarine; */
		flex: 1;
		text-align: center;
		width: 100%;
		height: 100%;
		border-radius: 0 0 0 20rpx;
	}

	.text {

		line-height: 46px;
	}
</style>
